<template>
  <div>
    <div>
      <img src="../static/pexels-cottonbro-studio-4089460.png" alt="" class="banner-image">
    </div>
    <div class="main_padd">
      <div class="about-vioce-container">
        <div class="about-vioce-title">
          <p class="about-tiltle-text " :class="start == 0 ? 'tiltle-text-active':''" @click="onstart(0)">关于金嗓音</p>
          <p class="about-tiltle-text " :class="start == 1 ? 'tiltle-text-active':''" @click="onstart(1)">支付方式</p>
        </div>
      </div>
    </div>
    <div v-if="start == 0">
      <div class="main_padd">
        <div class="about-vioce-container">

          <div class="">
            <div class="about-desc-container">
              <p class="about-desc-items">
                广州金嗓音科技有限公司成立于2010年12月，是一家专注于国内市场的语音整合服务公司。矢志成为全国领先的配音服务品牌。秉承“长期主义”价值观，集结业内知名配音师、互联网、服务业的行业好手，致力于为注重“企业形象”和“品牌气质”的高要求客户提供
                “差异化”“精细品质”和“高商业价值”的配音服务。</p>
              <p class="about-desc-items">
                广州金嗓音科技有限公司位于中国广州，在北京、上海、成都、济南设有录音棚，靠专业和口碑吸引众多客户；成⽴10年来成功服务：科技、时尚、家居、健康、汽⻋、互联网、快消、消费电⼦、地产等众多世界品牌及品类标杆，包括：好未来、腾讯、阿里巴巴、奔驰、海尔、雅迪、顺丰、爱奇艺、名创优品等1000+国内外上市和旗帜品牌。
              </p>

            </div>
          </div>
          <div>
            <div class="about-desc-imgbox row justify-content-between align-items-center no-gutters text-center">
              <div class="about-imgbox-items   col-sm-6 col-12">
                <div class="new_width">
                  <img src="../static/about-test.png" alt="" class="img-about">
                  <p><span>紧凑现代的空间声学设计</span></p>
                  <p>灵活适应各类录音制作的需要</p>
                </div>

              </div>
              <div class="about-imgbox-items  col-sm-6 col-12">
                <div class="new_width">
                  <img src="../static/about-test.png" alt="" class="img-about">
                  <p><span>紧凑现代的空间声学设计</span></p>
                  <p>灵活适应各类录音制作的需要</p>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>


      <!-- 分割 -->
      <div>
        <img src="../static/pexels-cottonbro-studio-4089460.png" alt="" class="banner-image">
      </div>
      <div class="about-vioce-container">
        <div class="main_padd">
          <div class="about-desc-container">
            <p class="about-desc-items">
              广州金嗓音科技有限公司成立于2010年12月，是一家专注于国内市场的语音整合服务公司。矢志成为全国领先的配音服务品牌。秉承“长期主义”价值观，集结业内知名配音师、互联网、服务业的行业好手，致力于为注重“企业形象”和“品牌气质”的高要求客户提供
              “差异化”“精细品质”和“高商业价值”的配音服务。</p>
            <p class="about-desc-items">
              广州金嗓音科技有限公司位于中国广州，在北京、上海、成都、济南设有录音棚，靠专业和口碑吸引众多客户；成⽴10年来成功服务：科技、时尚、家居、健康、汽⻋、互联网、快消、消费电⼦、地产等众多世界品牌及品类标杆，包括：好未来、腾讯、阿里巴巴、奔驰、海尔、雅迪、顺丰、爱奇艺、名创优品等1000+国内外上市和旗帜品牌。
            </p>

          </div>
          <div>
            <div class="about-desc-imgbox row justify-content-between align-items-center no-gutters text-center">
              <div class="about-imgbox-items   col-sm-6 col-12">
                <div class="new_width">
                  <img src="../static/about-test.png" alt="" class="img-about">
                  <p><span>紧凑现代的空间声学设计</span></p>
                  <p>灵活适应各类录音制作的需要</p>
                </div>

              </div>
              <div class="about-imgbox-items  col-sm-6 col-12">
                <div class="new_width">
                  <img src="../static/about-test.png" alt="" class="img-about">
                  <p><span>紧凑现代的空间声学设计</span></p>
                  <p>灵活适应各类录音制作的需要</p>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="start == 1">
      <div class="about-vioce-container main_padd minwidth">
        <div class="about-vioce-title row align-items-center justify-content-around no-gutters">
          <p class=" " :class="paystart == 0 ? 'tiltle-text-active2':''" @click="onpaystart(0)">关于金嗓音</p>
          <p class=" " :class="paystart == 1 ? 'tiltle-text-active2':''" @click="onpaystart(1)">支付方式</p>
          <p class=" " :class="paystart == 2 ? 'tiltle-text-active2':''" @click="onpaystart(2)">支付方式</p>
        </div>
      </div>
      <div class="pay_img">
        <img :src="paysrc" alt="" srcset="">
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        start: 0,
        paystart: 0,
        paysrc:"https://inews.gtimg.com/newsapp_bt/0/14297516724/641"
      }
    },
    methods: {
      onstart(item) {
        this.start = item
      },
      onpaystart(item) {
        this.paystart = item
      }
    },
  }

</script>

<style>
  .banner-image {
    width: 100%;
  }

  body {
    background-color: #FAFAFA;
  }

  .about-vioce-container {
    width: 100%;
  }

  .about-vioce-title {
    width: 100%;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #E4E5E9;
  }

  .about-tiltle-text {
    color: #757575;
    font-size: 22px;
    margin: 0 19px;
  }

  .tiltle-text-active {
    color: #000000;
    font-size: 22px;
    font-weight: bold;
    border-bottom: 2px solid #000000;
  }
  .tiltle-text-active2 {
    color: #000000;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 2px solid #000000;
  }

  .about-desc-container {
    padding: 102px 0;
  }

  .about-desc-items {
    line-height: 35px;
  }

  .about-desc-imgbox {
    width: 100%;
    display: flex;
    justify-content: space-around;
  }

  .img-about {
    width: 100%;
  }

  .about-imgbox-items {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .pay_img{
    width: 50%;
    min-width: 240px;
    margin: 0 auto;
    overflow: hidden;
  }
  .pay_img>img {
    width: 100%;
  }
  .minwidth{
    max-width: 450px;
  }
</style>
